<template>
  <div>
    <!-- Vue 提供了 ref 属性来获取 DOM 元素 -->
    <!-- 1. 给要获取的 DOM 元素添加 ref 属性 -->
    <!-- 2. 在需要获取的地方, 使用 this.$refs.属性名 -->
    <h1 ref="hh" id="h1">你好世界!</h1>
    <button @click="get">点我获取 h1</button>
    <hr>
    <Demo ref="de" v-model="count" />
    <button @click="getDemo">点我获取 Demo 组件</button>
  </div>
</template>

<script>
import Demo from './components/Demo.vue'
export default {
  components: {
    Demo
  },
  data() {
    return {
      count: 1
    }
  },
  methods: {
    get() {
      const h1 = document.querySelector('h1')
      console.log(h1)
      console.log(this.$refs.hh)
    },
    getDemo() {
      // console.log(this.$refs.de)
      // 获取组件对象有什么用?
      // 组件对象中有组件的数据和方法
      // 当获取到组件对象后, 可以获取子组件的数据, 可以调用子组件的方法
      this.$refs.de.fn(123)
      console.log(this.$refs.de.msg)
    }
  }
}
</script>